<template>
  <div>
    <el-form
      ref="formRef"
      :model="forms"
      :rules="rules"
      label-width="120px"
      label-position="top"
    >
      <el-row>
        <el-col>
          <el-table :data="forms.dataList" border class="borderTable">
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="55"
            />
            <el-table-column
              label="预评估任务名称"
              align="center"
              prop="taskName"
            >
              <template #default="scope">
                <el-form-item
                  v-if="scope.row.show"
                  label=""
                  :rules="rules.ypgName"
                  :prop="`dataList.${scope.$index}.ypgName`"
                  label-width="0px"
                >
                  <el-input
                    v-model="scope.row.ypgName"
                    placeholder="请输入"
                    readonly
                    @click="openTaskReport(scope.row, scope.$index, 1)"
                  />
                </el-form-item>
                <span  v-if="!scope.row.show">{{ scope.row.ypgName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="预评估任务地区"
              align="center"
              prop="provinceNames"
              width="140"
            />
            <el-table-column label="简本报告" align="center" prop="jbReportId" show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.jbReportName }}
              </template>
            </el-table-column>
            <el-table-column label="详本报告" align="center" prop="xbReportId"  show-overflow-tooltip>
              <template #default="scope">
                {{ scope.row.xbReportName }}
              </template>
            </el-table-column>
            <el-table-column
              label="现场调查任务名称"
              align="center"
              prop="xcdcId"
            >
              <template #default="scope">
                <el-form-item
                  v-if="scope.row.show"
                  :rules="rules.xcdcName"
                  label=""
                  :prop="`dataList.${scope.$index}.xcdcName`"
                  label-width="0px"
                >
                  <el-input
                    v-model="scope.row.xcdcName"
                    placeholder="请输入"
                    readonly
                    @click="openTaskReport(scope.row, scope.$index, 2)"
                  />
                </el-form-item>
                <span  v-if="!scope.row.show">{{ scope.row.xcdcName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="现场调查报告"
              align="center"
              prop="xcdcReportId"
              class-name="small-padding fixed-width"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{ scope.row.xcdcReportName }}
              </template>
            </el-table-column>
            <el-table-column
              v-if="isTableEdit"
              label="报告版本修改"
              align="center"
              prop="report"
              class-name="small-padding fixed-width"
            >
              <template #default="scope">
                <el-button type="text" @click="handleReportJb(scope.row)"
                  >简本</el-button
                >
                <el-button type="text" @click="handleReportXb(scope.row)"
                  >详本</el-button
                >
                <el-button type="text" @click="handleReportXcdc(scope.row)"
                  >现场调查报告</el-button
                >
              </template>
            </el-table-column>
            <el-table-column v-if="isTableEdit" label="操作" align="center">
              <template #default="scope">
                <el-button plain @click="handleDel(scope.row, scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <template #append v-if="isTableEdit">
              <el-icon
                :size="22"
                color="var(--el-color-primary)"
                style="font-weight: bold; margin: 10px 0px; cursor: pointer"
                @click="handleAdd"
                ><Plus
              /></el-icon>
              <span style="cursor: pointer" @click="handleAdd">关联任务</span>
            </template>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog
      :title="typeTask == 1 ? '预评估任务' : '现场调查任务'"
      v-model="openTask"
      width="1200px"
      append-to-body
    >
      <taskManageList
        :dialogVisible="openTask"
        v-if="typeTask == 1"
        @getSelectionTask="getSelectionTask"
        :typeStatus="typeTask"
        :tableChooseVal="tableChooseVal"
      />

      <manage
        :dialogVisible="openTask"
        v-if="typeTask == 2"
        :tableChooseVal="tableChooseVal"
        @getSelectionTask="getSelectionTask"
        :typeStatus="typeTask"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormSelect">确定</el-button>
          <el-button plain @click="openTask = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 版本选择 -->
    <el-dialog
      :title="
        typeReport == 1
          ? '简本报告版本选择'
          : typeReport == 2
          ? '详本报告版本选择'
          : '现场版本调查报告'
      "
      v-model="openReport"
      width="1200px"
      append-to-body
    >
      <el-table :data="reportList" border class="borderTable">
        <el-table-column label="序号" align="center" type="index" width="55" />
        <el-table-column label="报告类型" prop="type">
          <template #default="scope">
            <span v-if="scope.row.type == 1">简本报告</span>
            <span v-if="scope.row.type == 2">详本报告</span>
            <span v-if="scope.row.type == 3">现场调查报告</span>
          </template>
        </el-table-column>
        <el-table-column
          label="报告名称"
          prop="reportName"
          width="300"
        ></el-table-column>
        <el-table-column label="上传人" prop="uploadUserName"></el-table-column>
        <el-table-column label="上传时间" prop="uploadTime"></el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button type="text" @click="handleChoose(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button plain @click="openReport = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {
  getReportListByjb,
  getReportListByxb,
  getReportListByxcdc,
} from "@/api/workEvaluation/appraisalTaskManagement/appraisalTaskManage.js";
import taskManageList from "../Components/taskManageList";
import manage from "../Components/manage";
const { proxy } = getCurrentInstance();
import { onMounted } from "vue";
const selectTask = ref({});
const selectObj = ref({});
const ind = ref();
const loading = ref(false);
const typeReport = ref(0);
const typeTask = ref(0);
const openTask = ref(false);
const groupList = ref([]);
const tableChooseVal = ref();
const currentVal = ref({});
const openReport = ref(false);
const reportList = ref([]);
const status = ref(false)
const props = defineProps({
  forms: {
    default: {},
    type: Object,
  },
  isTableEdit: {
    type: Boolean,
    default: false,
  },
});
const rules = ref({
  ypgName: [
    { required: true, message: "请选择预评估任务名称", trigger: "change" },
  ],
  xcdcName: [
    { required: true, message: "请选择现场调查任务名称", trigger: "change" },
  ],
});
watch(()=>props.isTableEdit,()=>{
  if(isTableEdit.value==true){
    forms.value.dataList.forEach((v,i)=>{
      v.show=true
    })
  }
})
const { forms, isTableEdit } = toRefs(props);
//提交
const getSelectionTask = (val) => {
  if (typeTask.value == 1) {
    selectTask.value = JSON.parse(JSON.stringify(val[0]));
  } else {
    selectObj.value = JSON.parse(JSON.stringify(val[0]));
  }
};
const handleAdd = () => {
  forms.value.dataList.push({
        id: "",
        ypgId: "",
        ypgName: "",
        provinceNames: "",
        provinceIdList: [],
        xcdcId: "",
        xcdcName: "",
        jbReportId: "",
        xbReportId: "",
        xcdcReportId: "",
        show: true,
      });
}
const  validateHandle=()=>{
  proxy.$refs['formRef'].validate((valid)=>{
    if(valid){
      status.value=true
    }else{
       status.value=false
    }
  })
}
const openTaskReport = (row, index, type) => {
  ind.value = index;
  selectTask.value = {};
  selectObj.value = {};
  typeTask.value = type;
  openTask.value = true;
  if(type==1){
    tableChooseVal.value=row
  }else if(type==2){
    tableChooseVal.value=row
  }
};
// 删除
const handleDel = (val, index) => {
  forms.value.dataList.splice(index, 1);
};

// 点击简本
const handleReportJb = (val) => {
  currentVal.value = val;
  typeReport.value = 1;
  if (val.ypgId == null || val.ypgId == "") {
    proxy.$modal.msgWarning("请先选择预评估任务");
  } else {
    getReportListByjb({
      id: val.ypgId,
      page: forms.value.page,
      rows: forms.value.rows,
    }).then((res) => {
      reportList.value = res.data.rows;
      openReport.value = true;
    });
  }
};
// 点击详本
const handleReportXb = (val) => {
  currentVal.value = val;
  typeReport.value = 2;
  if (val.ypgId == null || val.ypgId == "") {
    proxy.$modal.msgWarning("请先选择预评估任务");
  } else {
    getReportListByxb({
      id: val.ypgId,
      page: forms.value.page,
      rows: forms.value.rows,
    }).then((res) => {
      reportList.value = res.data.rows;
      openReport.value = true;
    });
  }
};
// 点击现场调查
const handleReportXcdc = (val) => {
  currentVal.value = val;
  typeReport.value = 3;
  if (val.xcdcId == null || val.xcdcId == "") {
    proxy.$modal.msgWarning("请先选择现场调查任务");
  } else {
    getReportListByxcdc({
      id: val.xcdcId,
      page: forms.value.page,
      rows: forms.value.rows,
    }).then((res) => {
      reportList.value = res.data.rows;
      openReport.value = true;
    });
  }
};
// 报告选择
const handleChoose = (val) => {
  if (typeReport.value == 1) {
    currentVal.value.jbReportName = val.reportName;
    currentVal.value.jbReportId = val.id;
  } else if (typeReport.value == 2) {
    currentVal.value.xbReportName = val.reportName;
    currentVal.value.xbReportId = val.id;
  } else {
    currentVal.value.xcdcReportName = val.reportName;
    currentVal.value.xcdcReportId = val.id;
  }
  openReport.value = false;
};

//选择小组
const groupDialog = () => {
  openGroup.value = true;
  queryParams.value.page = 1;
  getGroupList();
};
//确定
const submitFormSelect = () => {
  nextTick(() => {
    if (JSON.stringify(selectTask.value) != "{}") {
      const obj = selectTask.value;
      tableChooseVal.value=selectTask.value
      forms.value.dataList[ind.value].ypgName = obj.taskName;
      forms.value.dataList[ind.value].ypgId = obj.id;
      forms.value.dataList[ind.value].provinceNames = obj.provinceNames;
      forms.value.dataList[ind.value].provinceIdList = obj.provinceIdList;
      //简本
      getReportListByjb({
        id: forms.value.dataList[ind.value].ypgId,
        page: forms.value.page,
        rows: forms.value.rows,
      }).then((res) => {
        forms.value.dataList[ind.value].jbReportId = res.data.rows[0].id;
        forms.value.dataList[ind.value].jbReportName =
          res.data.rows[0].reportName;
      });
      //详本
      getReportListByxb({
        id: forms.value.dataList[ind.value].ypgId,
        page: forms.value.page,
        rows: forms.value.rows,
      }).then((res) => {
        forms.value.dataList[ind.value].xbReportId = res.data.rows[0].id;
        forms.value.dataList[ind.value].xbReportName =
          res.data.rows[0].reportName;
      });
      openTask.value = false;
    }
    if (JSON.stringify(selectObj.value) != "{}") {
      const obj = selectObj.value;
      tableChooseVal.value=selectObj.value
      forms.value.dataList[ind.value].xcdcName = obj.taskName;
      forms.value.dataList[ind.value].xcdcId = obj.id;
      openTask.value = false;
      getReportListByxcdc({
        id: forms.value.dataList[ind.value].xcdcId,
        page: forms.value.page,
        rows: forms.value.rows,
      }).then((res) => {
        forms.value.dataList[ind.value].xcdcReportId = res.data.rows[0].id;
        forms.value.dataList[ind.value].xcdcReportName =
          res.data.rows[0].reportName;
      });
    }
  });
};
defineExpose({ status,validateHandle })
// defineExpose({
//   editData: forms.value.dataList,
// })
</script>
<style lang="scss" scoped>
:deep(.el-table).borderTable td.el-table__cell {
  border-bottom: 1px solid #ebeef5 !important;
  border-right: 1px solid #ebeef5 !important;
  .cell {
    // height: 68px;
    // line-height: 68px;
    .el-form-item {
      position: relative;
      top: 18px;
      .el-input__suffix {
        top: 9px;
      }
    }
  }
}
:deep(.el-table__append-wrapper) {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
